<template>
  <view class="favorites-page">
    <view class="page-header">
      <text class="page-title">我的收藏</text>
      <text class="edit-btn" @click="toggleEditMode">{{ isEditMode ? '完成' : '编辑' }}</text>
    </view>
    
    <view class="favorites-list" v-if="favorites.length > 0">
      <view 
        v-for="item in favorites" 
        :key="item.id"
        class="favorite-item"
      >
        <view class="item-select" v-if="isEditMode" @click="toggleSelect(item.id)">
          <text class="select-icon">{{ item.selected ? '☑️' : '☐' }}</text>
        </view>
        <image class="item-image" :src="item.image" mode="aspectFill" />
        <view class="item-info">
          <text class="item-title">{{ item.title }}</text>
          <text class="item-desc">{{ item.description }}</text>
          <view class="item-meta">
            <text class="item-type">{{ item.type }}</text>
            <text class="item-time">{{ item.favoriteTime }}</text>
          </view>
        </view>
        <view class="item-actions">
          <view class="action-btn" @click="viewDetail(item)">
            <text class="action-icon">👁️</text>
            <text class="action-text">查看</text>
          </view>
          <view class="action-btn delete-btn" v-if="isEditMode" @click="removeFavorite(item.id)">
            <text class="action-icon">🗑️</text>
            <text class="action-text">删除</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="empty-favorites" v-else>
      <text class="empty-icon">❤️</text>
      <text class="empty-text">还没有收藏任何内容</text>
      <view class="go-explore-btn" @click="goExplore">去探索</view>
    </view>
    
    <view class="page-footer" v-if="favorites.length > 0 && isEditMode">
      <view class="select-all">
        <text class="select-icon" @click="toggleSelectAll">{{ allSelected ? '☑️' : '☐' }}</text>
        <text class="select-text">全选</text>
      </view>
      <view class="batch-actions">
        <view class="batch-delete-btn" @click="batchDelete">批量删除</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const isEditMode = ref(false)

// 假数据
const favorites = ref([
  {
    id: 1,
    title: 'Vue3 + TypeScript 实战课程',
    description: '深入浅出讲解Vue3的响应式原理',
    type: '课程',
    image: 'https://via.placeholder.com/100x100/ff6b35/ffffff?text=Vue3',
    favoriteTime: '2024-01-15',
    selected: false
  },
  {
    id: 2,
    title: 'UI设计趋势分析',
    description: '2024年最新UI设计趋势',
    type: '视频',
    image: 'https://via.placeholder.com/100x100/ff6b35/ffffff?text=UI设计',
    favoriteTime: '2024-01-14',
    selected: false
  },
  {
    id: 3,
    title: 'iPhone 15 Pro Max',
    description: '最新款iPhone，性能强劲',
    type: '商品',
    image: 'https://via.placeholder.com/100x100/ff6b35/ffffff?text=iPhone',
    favoriteTime: '2024-01-13',
    selected: false
  }
])

const allSelected = computed(() => {
  return favorites.value.length > 0 && favorites.value.every(item => item.selected)
})

const toggleEditMode = () => {
  isEditMode.value = !isEditMode.value
  // 重置选择状态
  if (!isEditMode.value) {
    favorites.value.forEach(item => item.selected = false)
  }
}

const toggleSelect = (itemId) => {
  const item = favorites.value.find(item => item.id === itemId)
  if (item) {
    item.selected = !item.selected
  }
}

const toggleSelectAll = () => {
  const newStatus = !allSelected.value
  favorites.value.forEach(item => {
    item.selected = newStatus
  })
}

const viewDetail = (item) => {
  switch (item.type) {
    case '课程':
      uni.navigateTo({ url: `/pages/CourseDetailPage/CourseDetailPage?courseId=${item.id}` })
      break
    case '视频':
      uni.switchTab({ url: '/pages/VideoPage/VideoPage' })
      break
    case '商品':
      uni.switchTab({ url: '/pages/ShopPage/ShopPage' })
      break
    default:
      uni.showToast({ title: '查看详情', icon: 'none' })
  }
}

const removeFavorite = (itemId) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这个收藏吗？',
    success: (res) => {
      if (res.confirm) {
        const index = favorites.value.findIndex(item => item.id === itemId)
        if (index > -1) {
          favorites.value.splice(index, 1)
          uni.showToast({ title: '删除成功', icon: 'success' })
        }
      }
    }
  })
}

const batchDelete = () => {
  const selectedItems = favorites.value.filter(item => item.selected)
  if (selectedItems.length === 0) {
    uni.showToast({ title: '请选择要删除的收藏', icon: 'none' })
    return
  }
  
  uni.showModal({
    title: '批量删除',
    content: `确定要删除选中的${selectedItems.length}个收藏吗？`,
    success: (res) => {
      if (res.confirm) {
        favorites.value = favorites.value.filter(item => !item.selected)
        uni.showToast({ title: '删除成功', icon: 'success' })
        isEditMode.value = false
      }
    }
  })
}

const goExplore = () => {
  uni.switchTab({ url: '/pages/CoursePage/CoursePage' })
}
</script>

<style scoped>
.favorites-page {
  background: #f5f5f5;
  min-height: 100vh;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}
.page-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.edit-btn {
  font-size: 28rpx;
  color: #ff6b35;
}
.favorites-list {
  padding: 20rpx;
}
.favorite-item {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
}
.item-select {
  margin-right: 20rpx;
}
.select-icon {
  font-size: 40rpx;
  color: #ff6b35;
}
.item-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;
}
.item-info {
  flex: 1;
}
.item-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}
.item-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}
.item-meta {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.item-type {
  font-size: 22rpx;
  color: #ff6b35;
  background: rgba(255, 107, 53, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}
.item-time {
  font-size: 22rpx;
  color: #999;
}
.item-actions {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx;
}
.action-icon {
  font-size: 32rpx;
  margin-bottom: 5rpx;
}
.action-text {
  font-size: 20rpx;
  color: #666;
}
.delete-btn .action-text {
  color: #ff4757;
}
.empty-favorites {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}
.empty-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}
.go-explore-btn {
  background: #ff6b35;
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
.page-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1rpx solid #f0f0f0;
}
.select-all {
  display: flex;
  align-items: center;
}
.select-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 15rpx;
}
.batch-actions {
  display: flex;
  gap: 20rpx;
}
.batch-delete-btn {
  background: #ff4757;
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style>
